<template>
  <view class="quick-select-center" @click="_handleClick">
    <view class="title">
      <text>选品中心</text>
    </view>
    <view v-if="list.length" class="list-wrap">
      <view v-for="(item, index) in list" :key="index" class="list-item">
        <view class="cover-wrap">
          <image :src="item.mainImage" class="cover-image" mode="aspectFill" />
          <!--  <image src="https://image.qqpyyds.com/mpAppImg/icon/video-player-icon1.png" class="player-icon" />-->
        </view>
        <view class="price-wrap">
          <text>佣金</text>
          <text class="fontWeight">{{item.commissionRatio}}%</text>
        </view>
      </view>
    </view>
    <!-- 缺省状态 -->
    <view v-else class="empty">
      <text class="empty-txt">货源越多赚更多！</text>
      <view class="button-wrap">
        <button open-type="share" hover-class='hover' class="btn">邀请好友供货</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'quickSelectCenter',
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    _handleClick() {
      if (this.list.length) {
        this.navigateTo({ url: '/pagesB/selectionCenter/index' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.quick-select-center {
  width: 100%;
  height: 300rpx;
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  .title {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    color: $n8Color;
  }
  .list-wrap {
    display: flex;
    height: 192rpx;
    .list-item {
      height: 100%;
      margin-right: 16rpx;
    }
    .cover-wrap {
      position: relative;
      width: 144rpx;
      height: 144rpx;
      margin-bottom: 8rpx;
    }
    .cover-image {
      width: 144rpx;
      height: 144rpx;
      border-radius: 16rpx;
    }
    //.player-icon {
    //  position: absolute;
    //  left: 50%;
    //  top: 50%;
    //  transform: translate(-50%, -50%);
    //  width: 56rpx;
    //  height: 56rpx;
    //}
    .price-wrap {
      display: flex;
      justify-content: center;
      font-size: 24rpx;
      line-height: 32rpx;
      color: $themeColor;
    }
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 192rpx;
    padding-top: 32rpx;
    .empty-txt {
      margin-bottom: 48rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 32rpx;
      color: $n6Color;
    }
    .btn {
      box-sizing: border-box;
      padding: 8rpx 16rpx;
      border-radius: 32rpx;
      border: 2rpx solid $themeColor;
      font-size: 24rpx;
      line-height: 32rpx;
      color: $themeColor;
    }
  }
}
</style>